{% extends 'share/base.html' %}
{% block content %}

<script type="text/javascript">
	CKEDITOR.timestamp='ABCDFD';
	var post_url='';
	app.controller('content',function ($scope,$http,$sce,$location,ajax,$timeout) {

		$scope.sub_page='dir'
		$scope.parents=[]
		$scope.dir={{crt_dir | safe}}
		$scope.child_dirs={{dirs | safe}};
		$scope.child_files={{files | safe}};
		$scope.crt_file=null;
		//$scope.new_file={};
		$scope.crt={};
		$scope.file_win='reading';

		
		
		$scope.trustAsHtml = function(string) {
		    return $sce.trustAsHtml(string);
		};
		$scope.submit=function (item,parent) {
			var postData = {
				//order:['save_link','get_link'],
				save_file:{item:item,p:parent},
				//get_link:{}
			}
			$http.post(post_url,postData)
				.success(function(data, status, headers, config) {  
					// 留言提交成功
					$scope.items=data.get_link.links;
					$scope.is_editing=false;
					$scope.add_new_ing=false;
				}).error(function(data, status, headers, config) {  
				    alert('有错误,返回码为:'+status)
				});
		}
		//$scope.show_content=function (item) {
		//	//$scope.crt_file = item;
		//	$location.path('file/'+item.pk)
		//};
		$scope.cancel=function () {
			$scope.edit_win='nothing';
		}
		$scope.$watch(function(){ return $location.path() }, function(nv){
			var rt = /file\/(\d+)/.exec(nv);
			if (rt){
				var pk = rt[1];
				if(find_file(pk)){
					$scope.crt_file=find_file(pk)
					//$timeout(function () {
					//	$('#file-index').html(update_file_index($('#file-content')))
					//})
					return
				}
				var postData={
					file_data_all:{pk:pk},
				}
				ajax.post(post_url,postData,function (data) {
					recv_dir_from_file_data(data)
					$scope.crt_file=find_file(data.file_data_all.file.pk)
					recv_tmp_dir_from_file(data)
					//$timeout(function () {
					//	$('#file-index').html(update_file_index($('#file-content')))
					//})
				})
			}
		});
		
		function find_file(pk) {
			for(var i=0;i<$scope.child_files.length;i++){
				if($scope.child_files[i].pk==pk){
					return $scope.child_files[i]
				}
			}
		}
		function recv_dir_from_file_data(data) {
			$scope.parents=data.file_data_all.parents
			$scope.dir = data.file_data_all.dir
			$scope.child_dirs=data.file_data_all.sibling.dirs;
			$scope.child_files=data.file_data_all.sibling.files;
		}
		function recv_tmp_dir_from_file(data) {
			$scope.tmp_parents=data.file_data_all.parents
			$scope.tmp_dir = data.file_data_all.dir
			$scope.tmp_child_dirs=data.file_data_all.sibling.dirs;
		}
		$scope.$watch(function () {return $scope.crt_file.content},function () {
			$timeout(function () {
				refresh_show_info()
			})
			
		})
		function refresh_show_info() {
			$('#file-index').html(update_file_index($('#file-content')))
			MathJax.Hub.Queue(["Typeset",MathJax.Hub])
			load_syntax()
		}
		$scope.add_new=function (v,file) {
			if(!v)return
			
			var postData = {
				add_file:{name:file.name,content:file.content,p_dir:$scope.dir},
			}
			ajax.post(post_url,postData,function (data) {
				$location.path('/file/'+data.add_file.file.pk)
				$scope.file_win='reading'
			})
		};
		$scope.update=function (v,ele) {
			if(!v)return
			var postData={
				update:{ele:ele}
			}
			ajax.post(post_url,postData)
			$scope.file_win='reading'
			$timeout(function () {
				refresh_show_info()
			})
		}
		$scope.del_selected=function () {
			rt=confirm('是否删除？')
			if(!rt)return
			var postData = {
				order:['del_elements','dir_data_all'],
				del_elements:{ele_array:current_selected()},
				dir_data_all:{pk:$scope.dir.pk}
			}
			if($scope.crt_file.checked){
				$scope.crt_file=null
			}
			ajax.post(post_url,postData,function (data) {
				recv_dir(data)
			})
		};

		$scope.move=function (ele_array,p_dir) {
			if(ele_array.length==0)return
			postData={
				move:{ele_array:ele_array,p_dir:p_dir}
			}
			ajax.post(post_url,postData,function () {
				$scope.switch_dir($scope.dir.pk)
				$scope.edit_win='nothing'
			})
		}
		$scope.add_newDir=function (v,name) {
			if (!v)return
			$scope.edit_win='nothing'
			var postData={
				order:['add_dir','dir_data_all'],
				add_dir:{name:name,p_dir:$scope.dir},
				dir_data_all:{pk:$scope.dir.pk}
			}
			ajax.post(post_url,postData,function (data) {
				recv_dir(data)
			})
		};
		$scope.current_selected=function () {
			var child_dirs=$scope.child_dirs;
			var child_files=$scope.child_files;
			var out=[]
			for ( var i =0 ; i<child_dirs.length; i++){
				if(child_dirs[i].checked){
					out.push(child_dirs[i])
				}
			}
			for ( var i =0 ;i<child_files.length; i++){
				if(child_files[i].checked){
					out.push(child_files[i])
				}
			}
			return out
		}
		var current_selected=$scope.current_selected
		$scope.rename=function (v,ele,name) {
			if(!v)return;
			$scope.edit_win='nothing';
			ele.name=name
			var postData = {
				update:{ele:ele},
			}
			ajax.post(post_url,postData)
		}
		$scope.tmp_name={};
		$scope.edit_win='nothing';
		$scope.set_editWin=function (win) {
			$scope.edit_win=win;
		};
		$scope.switch_dir = function (dir_pk) {
			$scope.sub_page="dir"
			var postData = {
				dir_data_all:{pk:dir_pk},
			}
			ajax.post(post_url,postData,function (data) {
				recv_dir(data)
				recv_tmp_dir(data)
			})
		};
		function recv_dir(data) {
			$scope.parents=data.dir_data_all.parents;
			$scope.dir=data.dir_data_all.dir;
			$scope.child_dirs=data.dir_data_all.child_dirs;
			$scope.child_files=data.dir_data_all.child_files;
		}
		function recv_tmp_dir(data) {
			$scope.tmp_parents=data.dir_data_all.parents;
			$scope.tmp_dir=data.dir_data_all.dir;
			$scope.tmp_child_dirs=data.dir_data_all.child_dirs;
		}
		$scope.switch_tmp_dir=function (dir_pk) {
			var postData = {
				dir_data_all:{pk:dir_pk},
			}
			ajax.post(post_url,postData,function (data) {
				recv_tmp_dir(data)
			})
			
		}
		$scope.can_rename=function () {
			var selectd=current_selected()
			var count=selectd.length
			return count==1
			
		}
		$scope.cancel=function () {
			$scope.file_win='reading'
			$timeout(function () {
				refresh_show_info()
			}
			)
			
		}
		$scope.has_select=function () {
			var selectd=current_selected()
			var count=selectd.length
			return count>=1
		}
		$scope.search={
			update:function (keywords) {
					if(!keywords)return
					var postData={
						search:{keywords:keywords}
					}
					var self=this
					ajax.post(post_url,postData,function (data) {
						self.dirs=data.search.dirs
						self.files=data.search.files
					})
				},
			enterEvent:function(e) {
				var keycode = window.event?e.keyCode:e.which;
				if(keycode==13){
					$scope.search.update($scope.keywords);
				}
			},
				
		}
		$scope.logout=function () {
			var postData={
				logout:{}
			}
			ajax.post(post_url,postData,function (data) {
				location='/'
			})
		}	
	})
	function load_syntax() {
		syntax.adapt_ck()
		syntax.autoload()
		syntax.all()
	}

</script>
<style type="text/css" media="screen" id="test">
	#file-index ul{
		padding-left:6px;
		list-style-type:none;
	}
	.nodot-li{
		padding-left:5px;
	}
	.nodot-li li{
		list-style-type:none;
	}
	.ctn-list{
		margin-top: 20px;
		width:20%;
		float: left;
		margin-left:30px;
	}
	.inn-wrap{
		padding-left:10%;
	}
	#ctn-sel{
		width:75%;
		/*margin-left:20%;*/
	}
	.head-sel{
		position: fixed;
		left:0;
		top:0;
		width:40px;
		font-size: 150%;
		text-align: center;
		background-color: #DDD;
		padding-top: 10px;
	}
	.head-icon{
		padding-top:10px;
		padding-bottom:10px;
	}
	.head-icon.active{
		background-color: white;
	}
	.ban-img{
		max-width:90%;
	}
	.syntaxhighlighter {
		padding: 1px 0 !important;
	}
</style>
<script type="text/javascript">
	function fit_height() {
		$('.head-sel').height($(window).height());
	}
	$(function () {
		fit_height();
		$(window).resize(function () {
			fit_height()
		})
		
	})
</script>
<div ng-controller='content'>

	<div>
		<div class='head-sel'>
			<div class='head-icon' ng-class='{"active":sub_page=="dir"}' 
				ng-click='sub_page="dir"'>
				<span class="glyphicon glyphicon-list" 
					aria-hidden="true"></span>
			</div>
			<div class='head-icon' ng-class='{"active":sub_page=="search"}' 
				ng-click='sub_page="search"'>
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
			</div>
		</div>
		<!---------------dir----page---------------------->
		<div class='ctn-list' ng-show='sub_page=="dir"'>
			<div class='inn-wrap'>
		<!--<select id='ctn-sel' name="ss"  
			ng-model='crt.select' 
			ng-change='switch_dir(crt.select)'>
			<option value="[[p.pk]]" ng-repeat='p in parents'>[[p.name]]</option>
			<option value="[[dir.pk]]" >[[dir.name]]</option>
			</select>-->
		<div><span ng-repeat='d in parents'> 
			<a href="" ng-click='switch_dir(d.pk)' style='min-width:10px'>
				<span ng-show='$index!=0'>[[d.name]]</span>
				<span class="glyphicon glyphicon-cloud" aria-hidden="true" ng-show='$index==0' style='color: blue;'></span></a>
			/</span>
			<span ng-bind='dir.name' ng-show='parents.length!=0'></span>
			<span class="glyphicon glyphicon-cloud" aria-hidden="true" ng-show='parents.length==0' style='color: blue;'></span>
		</div>
		
		<div class='col-sm-12'>
			<ul class='nodot-li'>
				<li ng-repeat='item in child_dirs'>
					<input type="checkbox" name="test" value="" ng-model='item.checked'/>
					<span class="glyphicon glyphicon-folder-close" 
						style='color: #FFCC00;'
						aria-hidden="true">
						
					</span>
					<a href="" ng-click='switch_dir(item.pk)'>
						<span ng-bind='item.name'></span>
					</a>
				</li>
				<li ng-repeat='item in child_files'>
					<input type="checkbox" name="test" value="" ng-model='item.checked'/>
					 <span class="glyphicon glyphicon-file" 
					 	aria-hidden="true"></span>
					<a ng-href="#/file/[[item.pk]]"><span ng-bind='item.name'></span></a>
				</li>  <!-- ng-click='show_content(item)'-->
			</ul>
		</div>
		</div>
		</div>
		<!------------------------search page-------------------->
		<div class='ctn-list' ng-show='sub_page=="search"'>
		<div class='inn-wrap' >
			<input type="text" name="test" value="" ng-model='keywords' ng-keyup='search.enterEvent($event)'/>
			<span class="glyphicon glyphicon-search" aria-hidden="true" ng-click='search.update(keywords)' style="cursor:pointer"></span>
			<div>
				<ul>
					<li ng-repeat='dir in search.dirs'>
						<span class="glyphicon glyphicon-folder-close" 
							style='color: #FFCC00;'
							aria-hidden="true">
						</span>
						
						<a href="" ng-click='switch_dir(dir.pk)'>
							<span ng-bind='dir.name'></span>
						</a>
					</li>
					<li ng-repeat='file in search.files'>
						 <span class="glyphicon glyphicon-file" 
					 		aria-hidden="true"></span>
					 	
						<a href="#/file/[[file.pk]]"><span ng-bind='file.name'></span></a>
					</li>
				</ul>
			</div>
		</div>
		</div>

		<!------------------编辑逻辑页面----------------------->
		<div style='float: right;margin-right: 20px;'>
			<span>Welcome &nbsp{{user.username}}</span>&nbsp/&nbsp
			<a href="" ng-click='logout()'>logout</a>
		</div><!--border: 1px solid #999;display: inline-block;padding: 10px;radius:3px;-->
		<div class='col-md-9'>
			<div class='well well-lg' >
			<button name="test" type="button" value="val" class='btn btn-default'
				ng-click='file_win="modify"' ng-disabled='!crt_file'>
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
				编辑当前文件</button>
				
			<button name="test" type="button" value="val" class='btn btn-default'
				ng-click='file_win="new_file"'>
				<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
				新增文件</button>
				
			<button name="ssf" type="button" value="val" class='btn btn-default'
				ng-click='set_editWin("new_dir")'>
				<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
				新增文件夹</button>

			<button name="sg" type="button" value="val" class='btn btn-default'
				ng-click='set_editWin("rename")'
				ng-disabled='!can_rename()'>
				<span class="glyphicon glyphicon-font" aria-hidden="true"></span>
				重命名选中项</button>

			<button name="test" type="button" value="val" class='btn btn-default'
				ng-click='del_selected()' ng-disabled='!has_select()'>
				<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
				删除选中项</button>
				
			<button name="test" type="button" value="val" class='btn btn-default'
				ng-click='edit_win="move"' ng-disabled='!has_select()'>
				<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
				移动选中项</button>
			</div>

			<div ng-switch='file_win'>
				<div ng-switch-when='reading'>
					<div ng-show='crt_file'>
						<h2 ng-bind='crt_file.name' 
							style='border-bottom: 1px solid #999;'></h2>
		<!--------------------显示内容--------------------->
			<div id='file-index' style='width:200px;float: right;border: 1px solid #EBEBEB;border-radius:5px;padding: 8px;'></div>
			<div id='file-content' ng-bind-html='trustAsHtml(crt_file.content)'
				style='margin-right:100px;'></div>
			
					</div>
				</div>

				<div ng-switch-when='new_file'>
					<span >新增文件</span>
					<edit-form submit='add_new(valid,file)' 
						cancel='cancel()'></edit-form>
				</div>

				<div ng-switch-when='modify'>
					<span >修改文件</span>
					<edit-form submit='update(valid,file)' 
						item='crt_file' cancel='cancel()'></edit-form>		
				</div>
				
			</div>
				
				
			<div model-form ng-show='edit_win!="nothing"' style='width:60%;height:90%;'>
				<div style='position: relative;'>
				<button name="tessst" type="button" value="val" 
					style='position: absolute;right:20px;top:10px;' 
					ng-click='$parent.edit_win="nothing"'>关闭</button>
				</div>
				
				<div ng-switch='edit_win' 
					style='padding:60px; height:100%;overflow: auto;'>
				
					<div ng-switch-when='new_dir' >
						
						<span>新增文件夹</span>
						<name_form submit='add_newDir(valid,name)' 
							name='new dir'></name_form>
						
					</div>
					
					<div ng-switch-when='rename'>
						<span>重命名</span>
						<name_form submit='rename(valid,current_selected()[0],name)' 
							name='[[current_selected()[0].name]]'>
						</name_form>
					</div>

					<div ng-switch-when='move'>
						<span>移动选中文件/文件夹</span>
						
						<div><span ng-repeat='d in tmp_parents'> 
							<a href="" ng-click='switch_tmp_dir(d.pk)' style='min-width:10px'>[[d.name]]</a>
							&gt;</span>
							<span ng-bind='tmp_dir.name'></span>
						</div>
						
						<ul class='nodot-li'>
							<li ng-repeat='item in tmp_child_dirs'>
								<input type="checkbox" name="test" value="" ng-model='item.checked'/>
								<span class="glyphicon glyphicon-folder-close" aria-hidden="true">
								</span>
								<a href="" ng-click='switch_tmp_dir(item.pk)'>
									<span ng-bind='item.name'></span>
								</a>
							</li>
						</ul>
						<button name="test" type="button" value="val" 
							ng-click='move(current_selected(),tmp_dir)'>粘贴</button>
					</div>
	
				</div>

			

				
			</div>

			
			
		</div>
	</div>
</div>



{% endblock %}